<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="共享格子铺" autoBack>
			</u-navbar>
		</view>

		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		<view class="con-body" style="background-color: #fff;">
			<view class="main_type">
				<u-scroll-list>
					<view class="scroll-list" style="flex-direction: row;">
						<view class="scroll-list__goods-item" v-for="(item, index) in topics" :key="index"
							:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']" @click="topic(item)">
							<image class="scroll-list__goods-item__image" mode="heightFix" :src="item.image"></image>
							<text class="scroll-list__goods-item__text">{{ item.name }}</text>
						</view>
						<view class="scroll-list__show-more" @click="moreTopic">
							<text class="scroll-list__show-more__text">查看更多</text>
							<u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
						</view>

						<u-toast ref="uToast"></u-toast>
					</view>
				</u-scroll-list>
			</view>
			<view>
				<u-notice-bar :text="text1" bgColor="#e6f2f3" color="#0B898E"></u-notice-bar>
			</view>
			<!-- <view style="width: 100%; float: left; height: 65rpx; background-color: #f9f9f9;">
				<u-subsection :list="tabList" :current="current" activeColor="#0B898E" @change="TabChange"
					bgColor="#f9f9f9"></u-subsection>
			</view> -->
			<view class="main-service">
				<text style="margin-right:40rpx;" :class="current==0 ? 'title' : ''" @click="changetype(0)">邻里闲置</text>
				<text :class="current==1 ? 'title' : ''" @click="changetype(1)">物业直销</text>
			</view>
			<view class="u-demo-block__content" style="background-color: #FFFFFF; width: 100%;" v-if="current == 0">
				<view style="width:96%;padding-left:2%;">
					<view class="album" v-for="(item, index) in releases" :key="index">
						<view class="u-flex u-row-between">
							<view class="album__avatar">
								<u-avatar :src="item.avatar" mode="circle">
								</u-avatar>
							</view>
							<view style="width:70%;">
								<text style="font-size: 34rpx;font-weight: bold;color:#3e3e3e;">{{item.username}}</text>
								<view class="dis_inl_blo" style="margin-left:20rpx;">
									<u-icon v-if="item.contact_type == 1" name="weixin-circle-fill" @click="copy(item.contact)" color="#05CD65" size="20"></u-icon>
									<u-icon v-if="item.contact_type == 2" name="phone-fill" color="#0B898E" @click="call(item.contact)" size="21"></u-icon>
								</view>
								
								<!-- <u-text :text="item.username" color="#3e3e3e" bold size="17"></u-text> -->
								<u-text margin="0 0 8rpx 0" color="#999999" size="13" :text="'来自 ' + item.from"></u-text>
							</view>
							
							<view class="u-m-l-10 u-p-10" v-if="item.contact_type == 2">
								<!-- <u-icon name="phone" color="#0B898E" @click="call(item.contact)" label="拨号" labelSize="24rpx" labelColor="#0B898E" size="20"></u-icon> -->
							
								<u-text :text="'￥' + item.price" color="red" size="16"></u-text>
							</view>
							<view class="u-m-l-10 u-p-10" v-if="item.contact_type == 1">
								<!-- <u-icon name="weixin-circle-fill" @click="copy(item.contact)" color="#0B898E" label="复制" labelSize="24rpx" labelColor="#0B898E" size="20"></u-icon> -->
							
								<u-text :text="'￥' + item.price" color="red" size="16"></u-text>
							</view>
							<view class="u-m-l-10 u-p-10" v-if="item.contact_type == 0">
								<u-text :text="'￥' + item.price" color="red" size="16"></u-text>
							</view>
							
						</view>
						
						<view v-if="item.status == 1"
							style="float: right; height: 0rpx; position:relative;top: 10rpx;right: 30rpx;">
							<u-image width="100rpx" height="100rpx" src="https://resourse.cnlhjt.com/upload/20220825/ea67c8c95f615ffa9e2f4d3d81fc4316.png">
							</u-image>
						</view>
						<view class="album__content" style="display: block;width: 100%;">
							
							<view style="margin-top: 20rpx; margin-bottom: 10rpx;">
								<view style="margin-bottom:20rpx;">
									<text style="color: #008987; font-size: 28rpx;">{{item.theme}}</text>
									<text style="color: #333333;font-size: 30rpx;margin-left: 10rpx;"> {{item.content}}</text>
								</view>
								
								<u-album :urls="item.images" multipleSize="100" space="3"></u-album>
							</view>
					
							<view style="height:50rpx;margin-top:20rpx;">
								<text style="color: #666666; font-size: 26rpx; float: left;">{{item.time}}</text>
					
								<view style="margin-right: 10rpx; float: right; display: inline;">
									<u-icon @click="intoComment(item.id)" name="chat-fill" size="18" label-size="26rpx"
										color="#00aa00" :label="item.comment + '评论'"></u-icon>
								</view>
								<view style="margin-right: 10rpx; float: right; display: inline;">
									<u-icon name="heart" size="18" color="#ff0000" label-size="26rpx"
										:label="item.like + '赞'" @click="like(item.id, index)"></u-icon>
								</view>
								<view style="margin-right: 10rpx; float: right; display: inline;">
									<u-icon name="eye" size="18" color="#0055ff" label-size="26rpx"
										:label="item.see + '浏览'"></u-icon>
								</view>
					
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<view class="uni-flex-center" style="clear: both;margin-bottom: 20rpx;" v-if="current == 1">
				<view style="width:96%;padding-left:2%;">
					<u-grid :border="false" col="2">
						<u-grid-item v-for="(item,index) in releases" :key="index"
							:customStyle="{width: '46%', marginLeft: '2%', marginRight:'2%',marginBottom:'20rpx'}">
							<view class="main-service" style="min-width: 96%;padding:0;box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15);overflow: hidden; border-radius: 20rpx;"
								@click="goodDetail(item.id)">
								<u-image :src="item.images[0]" :lazy-load="true" width="100%" height="300rpx" mode="scaleToFill"></u-image>
									<view v-if="item.status == 1"
										style="float: right; height: 0rpx; position:relative;top: 10rpx;right: 20rpx;">
										<u-image width="100rpx" height="100rpx" src="https://resourse.cnlhjt.com/upload/20220825/ea67c8c95f615ffa9e2f4d3d81fc4316.png">
										</u-image>
									</view>
								<view style="padding: 10rpx 10rpx;">
									<view style="margin-top: 10rpx;">
										<text class="overflow" style="width:100%;font-size: 30rpx;">{{item.content}}</text>
									</view>
									<view style="margin-top: 3rpx;">
										<view class="u-flex u-row-between">
											<text class="u-line-1"
												style="color:#E35719; font-size: 22rpx;">{{item.theme}}</text>
											<text style="font-size: 32rpx;color:#f00;font-weight: bold;">￥{{item.price}}</text>
										</view>
									</view>
									<view class="u-flex u-row-between" style="margin-top:15rpx;">
										<view class="album__avatar">
											<u-avatar :src="item.avatar" size="30" mode="circle">
											</u-avatar>
										</view>
										<view style="width:85%;">
											<u-text text="物业直销" color="#3e3e3e" bold size="13"></u-text>
											<text class="overflow" style="font-size: 24rpx;margin-right:4rpx;color: #999;">{{item.from}}</text>
											
										</view>
									</view>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
				
			</view>

			<view style="clear: both; height:20rpx;"></view>
			<u-toast ref="uToast"></u-toast>
			<u-loadmore :status="status" @loadmore="moreDynamic" />
			<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getTopic,
		getLattice,
		likeDynamic,
		getLatticeDetail,
		getShareLatticeGoods
	} from "@/service/shareService.js";
	export default {
		data() {
			return {
				status: 'loadmore',
				topics: [],
				page: 1,
				limit: 6,
				releases: [],
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#0B868E',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [{
						iconPath: 'https://resourse.cnlhjt.com/upload/20220825/297a6c922f01bffbf8003dcd71876a3e.png',
						selectedIconPath: 'https://resourse.cnlhjt.com/upload/20220825/297a6c922f01bffbf8003dcd71876a3e.png',
						text: '发布',
						active: false
					},
					{
						iconPath: 'https://resourse.cnlhjt.com/upload/20220826/fe1324e9f480c358b1201642eed20eff.png',
						selectedIconPath: 'https://resourse.cnlhjt.com/upload/20220826/fe1324e9f480c358b1201642eed20eff.png',
						text: '首页',
						active: false
					},
					{
						iconPath: 'https://resourse.cnlhjt.com/upload/20220825/9745420910da6baf1946a0e7c3c069b1.png',
						selectedIconPath: 'https://resourse.cnlhjt.com/upload/20220825/9745420910da6baf1946a0e7c3c069b1.png',
						text: '我的发布',
						active: false
					}
				],
				page1: 1,
				limit1: 10,
				showEmpty: false,
				tabList: [
					'邻里闲置', '物业直销'
				],
				current: 0,
				listMode: 'list',
				text1:'免费上门·24小时必卖·不满意放心退',
				reFresh: "",
			}
		},
		watch:{
			//监听reFresh,如果有修改就执行监听器
				reFresh: function() {
					this.releases=[];
					this.current=0;
			        //调接口刷新数据
					getLattice({
						page: this.page1,
						limit: this.limit1
					}).then(this.getLattice);
				}
		},
		onReachBottom() {
			if (this.status == 'nomore') return;
			this.status = 'loading';
			this.page1 = ++this.page1;
			if (this.current == 0) {
				getLattice({
					page: this.page1,
					limit: this.limit1
				}).then(this.getLattice);
			} else {
				getShareLatticeGoods({
					page: this.page1,
					limit: this.limit1
				}).then(this.getLattice);
			}
		},
		onLoad() {
			getTopic({
				page: this.page,
				limit: this.limit
			}).then(this.getTopic);
			getLattice({
				page: this.page1,
				limit: this.limit1
			}).then(this.getLattice);
		},
		onShow() {
			
		},
		methods: {
			changetype(index) {
				this.current = index;
				this.status = 'loadmore';
				this.page = 1;
				this.page1 = 1;
				this.releases = [];
				if (this.current == 0) {
					getLattice({
						page: this.page1,
						limit: this.limit1
					}).then(this.getLattice);
				} else {
					getShareLatticeGoods({
						page: this.page1,
						limit: this.limit1
					}).then(this.getLattice);
				}
			},
			getTopic(e) {
				if (e.code == 200) {
					let list = e.result;
					list.forEach((item) => {
						this.topics.push(item);
					})
				} else {
					this.$refs.uToast.show({

						type: 'error',
						title: '失败',
						message: e.msg,
					})
				}
			},
			getLattice(e) {
				if (e.code == 200) {
					this.showEmpty = false;
					let list = e.result;
					list.forEach((item) => {
						this.releases.push(item);
					})
				} else {
					this.status = 'nomore';
					if (this.releases.length == 0) {
						this.showEmpty = true;
					}
				}
			},
			moreTopic() {
				this.page++;
				getTopic({
					page: this.page,
					limit: this.limit
				}).then(this.getTopic);
			},
			moreDynamic() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.page1 = ++this.page1;
				getLattice({
					page: this.page1,
					limit: this.limit1
				}).then(this.getLattice);
			},
			trigger(e) {
				if (e.index == 0) {
					this.$u.route({
						url: "/pagesShare/lattice/release",
						params: {}
					})
				} else if (e.index == 1) {
					this.$u.route({
						url: "/pages/index/index",
						params: {}
					})
				} else if (e.index == 2) {
					this.$u.route({
						url: "/pagesShare/mine/release",
						params: {}
					})
				}
			},
			fabClick() {
				// console.log(1);
			},
			tabChange(e) {
				this.current = e.value;
			},
			topic(item) {
				this.$u.route({
					url: '/pagesShare/lattice/nav-index',
					params: {
						item: JSON.stringify(item)
					}
				})
			},
			like(id, index) {
				likeDynamic({
					gid: id
				}).then(res => {
					if (res.code == 200) {
						this.releases[index].like += 1;
						this.$refs.uToast.show({

							type: 'success',
							title: '成功',
							message: res.msg
						})
					} else {
						this.$refs.uToast.show({

							type: 'error',
							title: '失败',
							message: res.msg
						})
					}
				});
			},
			intoComment(id) {
				this.$u.route({
					url: '/pagesShare/lattice/comment',
					params: {
						id: id
					}
				});
			},
			call(contact) {
				uni.makePhoneCall({
					phoneNumber: contact //仅为示例
				});
			},
			copy(contact) {
				var that=this;
				uni.setClipboardData({
					data: contact,
					success: function() {
						// that.$refs.uToast.show({

						// 	type: 'success',
						// 	title: '成功',
						// 	message: '复制成功'
						// })
					}
				});
			},
			goodDetail(id){
				this.$u.route({
					url: '/pagesShare/lattice/goods-detail',
					params: {
						gid: id
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.main-service{
		background-color:transparent;
		box-shadow:none;
		padding:20rpx;
		margin-top:0;
	}
	.main-service .title{
		padding-left:0;
		background-position: 4% 100%;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/53079139ae5b67d1270fc35fefba8d1e.png');
		background-size: 70px;
		background-repeat: no-repeat;
	}
	.main_type{
		width:94%;
		margin:20rpx auto;
		padding-right:3%;
		background-color: #FFFFFF;
		
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15); 
		border-radius: 20rpx;
		padding-top: 20rpx;
	}
	.album {
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		border-bottom:1rpx solid #f8f8f8;
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15); 

		&__avatar {
			padding: 5rpx;
			border-radius: 3rpx;
		}

		&__content {
			// margin-left: 20rpx;
			flex: 1;
		}
	}
	.u-scroll-list__indicator.data-v-0e75e492 {
		margin:0 !important;
	}

	.scroll-list {
		margin-left: 20rpx;
		@include flex(column);

		&__goods-item {
			margin-right: 20rpx;
			width:140rpx;
			text-align: center;
			&__image {
				display: block;
				// width: 45px;
				height: 44px;
				margin:0 auto;
				border-radius: 4px;
			}

			&__text {
				color: #444;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}
</style>
